<template>
    <div class="ma-content-block   " style="height:100%;position: relative;">

      <!-- <ma-crud :options="options" :columns="columns" ref="crudRef">
            <template #car_ids="{ record }">
          
          <a-tag color="blue" >{{ record?.driver.driver_name }}</a-tag>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-popconfirm content="是否删除此条信息?" @ok="handleDel(record)">
            <a-link  >删除</a-link>
        </a-popconfirm>
      </template>
      </ma-crud> -->
      <div class='flex flex_wrap' v-if="props.list.length != 0">
				<div class="sjCard" v-for="(item,index) in props.list" :key="index">
          <div class="flex marbot12" style="font-size:16px;line-height:24px">
            <div style="font-weight:600;margin-right:20px">{{item.driver.driver_name}}</div>
            <div style="font-weight:400;">{{item.car_no}}</div>
          </div>
          <div class="marbot12">{{item.driver.mobile}}</div>
          <div class="marbot12" style="height:1px;background:rgba(0,0,0,.15)"></div>
          <div class="flex">
            <a-popconfirm content="是否确认删除司机？" @ok="handleDel(item)">
              <div class="butNt flex align_center cursor"  > 删除司机</div>
            </a-popconfirm>
          </div>
          
        </div>
      </div>
      <div class="flex justify_center align_center" style="height:100%;width:100%" v-if="props.list.length == 0">
        <a-empty />
      </div>
      
    </div>
  </template>
  <script setup>
  import { ref, reactive,defineProps,defineEmits } from 'vue'
  import predictionOrderCar from '@/api/prediction/predictionOrderCar'
  import { Message } from '@arco-design/web-vue'
  import { Notification } from '@arco-design/web-vue';
  import tool from '@/utils/tool'
  import * as common from '@/utils/common'
  const emit = defineEmits(["shuaxin"]);
  const crudRef = ref()
  const order_id = ref()
  const inforow = ref()
  const dept_ids = ref()
  const props = defineProps({
		list: {
      type:Array,
			default: [],
		},
    loading:{
      type:Boolean,
      default: false,
    }
	});
  // dept_ids.value = props.deptIds.dept_id;
  // inforow.value = props.deptIds;
  // order_id.value = props.deptIds.id;
  // const open = (row) => {
  //   order_id.value = row.id
  //   inforow.value = row
  //   crudRef.value.requestData()
  //   }
  const handleDel = (row) =>{  // 删除
    predictionOrderCar.deletes({id:row.id}).then(res=>{
      if(res.code == 200){
        Notification.success('删除成功')
        emit('shuaxin')
      }
    })
  }


  
  const numberOperation = (newValue, id, numberName) => {
    predictionOrderCar.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
      res.success && Message.success(res.message)
    }).catch( e => { console.log(e) } )
  }
  
  const switchStatus = (statusValue, id, statusName) => {
    predictionOrderCar.changeStatus({ id, statusName, statusValue }).then( res => {
      res.success && Message.success(res.message)
    }).catch( e => { console.log(e) } )
  }
  
  
  const options = reactive({
    id: 'flyos_prediction_order_car',
    rowSelection: {
      showCheckedAll: true
    },
    pk: 'id',
    operationColumn: true,
    autoRequest:true,
    isDbClickEdit:false,
    operationWidth: 160,
    formOption: {
      viewType: 'modal',
      width: 600
    },
    api: predictionOrderCar.getList,
    recycleApi: predictionOrderCar.getRecycleList,
    add: {
      show: true,
      api: predictionOrderCar.saveDriver,
      auth: ['prediction:order:saveDriver']
    },
    edit: {
      show: false,
      api: predictionOrderCar.update,
      auth: ['prediction:orderCar:update']
    },
    delete: {
      show: false,
      api: predictionOrderCar.deletes,
      auth: ['prediction:orderCar:delete'],
      realApi: predictionOrderCar.realDeletes,
      realAuth: ['prediction:orderCar:realDeletes']
    },
    recovery: {
      show: false,
      api: predictionOrderCar.recoverys,
      auth: ['prediction:orderCar:recovery']
    },
    import: {
      show: false,
      url: 'prediction/orderCar/import',
      templateUrl: 'prediction/orderCar/downloadTemplate',
      auth: ['prediction:orderCar:import']
    },
    export: {
      show: false,
      url: 'prediction/orderCar/export',
      auth: ['prediction:orderCar:export']
    },
    beforeRequest: (params) => {
        params.order_id = order_id.value
        params.order = 'created_at'
        params.orderType = 'desc'
    },
    afterRequest: (params) => {
      console.log(params, "后置方法");
      params.map((v, i) => {
        v.car_ids = v.car_id
      });
    },
  })
  
  const columns = reactive([
    {
      title: "ID",
      dataIndex: "id",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      commonRules: {
        required: true,
        message: "请输入ID"
      }
    },
    {
    title: '绑定司机',
    dataIndex: 'car_ids',
    align: "center",
    formType: 'select',
    search: true,
    dict: {
      url: 'prediction/driver/getCarNoList',
      method:'get',
      // 指定组件接收的props
      props: { label: 'car_and_driver', value: 'id' },
      // 开启分页
      openPage: false,
      // 远程请求配置项
      params:{
        dept_id:dept_ids.value,
      },
    },
    commonRules: {
    required: true,
    message: "请选择司机"
    }
    },
    {
    title: '所属订单',
    dataIndex: 'order_id',
    align: "center",
    hide:true,
    addDisplay: false,
    editDisplay: false,
    addDefaultValue:async function (){
        return inforow.value.id;
    },
    disabled:true,
    formType: 'select',
    search: false,
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: 'prediction/order/remote',
      // 指定组件接收的props
      props: { label: 'order_no', value: 'id' },
      // 开启分页
      openPage: true,
      // 远程请求配置项
      remoteOption: {
          // 按用户名排序
          sort: { id: 'desc' }, // 如果不指定排序方式，默认为正序排序
          // 设置查询的字段
          select: [ 'id', 'order_no' ],
          // 设置数据过滤
          filter: {
            
          },
          // 关联模型
          relations: [
            
          ]
      }
    }
    },
    {
      title: '车牌号',
      dataIndex: 'car_no',
      align: "center",
      formType: 'input',
      addDisplay: false,
      editDisplay: false,
    },
    {
      title: '电话号码',
      dataIndex: 'driver.mobile',
      align: "center",
      formType: 'input',
      addDisplay: false,
      editDisplay: false,
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    }
  ])
  defineExpose({ open })

  </script>
  <style lang="less" scoped>
  .sjCard{
    padding:20px;
    border-radius:6px;
    border:1px solid rgba(0,0,0,.15);
    width:calc((100% - 12px) / 2);
    margin-bottom:12px;
    margin-right:12px;
    &:nth-child(2n){
      margin-right:0
    }
    .butNt{
      padding:2px 8px;
      border-radius:3px;
      border:1px solid rgba(220, 220, 220, 1);
    }
  }
  .flex{
      display:flex;
  }
  .flex_wrap{
      flex-wrap:wrap
  }
  
  .justify_between{
      justify-content:space-between
  }
  .justify_around{
      justify-content:space-around
  }
  .justify_center{
      justify-content:center
  }
  .align_center{
      align-items:center;
  }
  .flex_column{
    flex-direction: column;
  }
  .flex_1{
      flex:1
  }
  .width0{
      width:0
  }
  .ellipsis{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
  }
  .marbot14{
    margin-bottom:14px;
  }
  .marbot12{
    margin-bottom:12px;
  }
  .pad12{
    padding:12px;
  }
  .cursor{
    cursor: pointer;
  }
</style>
  <script> export default { name: 'prediction:orderCar' } </script>